import React, { Children } from 'react';
import { BreadcrumbItemType } from './breadcrumbItem';


export interface BreadcrumbProps {
    // 分隔符
    separator?: string | number | React.ReactNode,
    // 分隔icon的class类名
    separatorClassName?: string,
    className?: string,
    children?: React.ReactNode
}

const Breadcrumb: React.FC<BreadcrumbProps> = (props) => {

    const { children, separatorClassName, separator } = props;

    const renderChildren = () => {
        return Children.map(children, ((child, index) => {
            const childElement = child as React.FunctionComponentElement<BreadcrumbItemType>
            // 第一个没有分隔标记，故index为0时
            if (childElement.type.displayName === 'BreadcrumbItem') {
                return React.cloneElement(childElement, index ? { separatorClassName, separator } : {});
            } else {
                console.log('Warning: Breadcrumb 组件的子组件只能是BreadcrumbItem');
            }
        }))
    }

    return <div className={'yulang-breadcrumb-container'}>
        {renderChildren()}
    </div>

}

Breadcrumb.defaultProps = {
    separator: '/',
}

export default Breadcrumb;